<template>
	<view class="pageview flex flex-direction">
		<view class="top-wrap">
			<tabs @changeTab="changeTab"></tabs>
		</view>
		<view class="main flex-sub">
			<view class="card">
				<timebar :timeType="timeType" @updateData="updateData" ref="timebar"></timebar>
				<view class="weightCount" v-if="timeType == 'date'">
					<view class="weightbar">
						<weightStep size="lg"></weightStep>
					</view>
					<view class="flex align-center grid">
						<view class="flex-sub">
							<view class="w-title grid-text">体重</view>
							<view class="w-num">12</view>
						</view>
						<view class="flex-sub">
							<view class="w-title grid-text">BMI</view>
							<view class="w-num">12</view>
						</view>
						<view class="flex-sub">
							<view class="w-title grid-text">体脂率</view>
							<view class="w-num">12</view>
						</view>
					</view>
				</view>
				<template v-else>
					<weightChart ref="weightChart"></weightChart>
					<view class="tabs flex align-center">
						<view class="tab-item flex-sub" @tap="changeWeightTab(index)" :class="{ active: curIndex == index }" v-for="(item, index) in tablist" :key="index">
							{{ item }}
						</view>
					</view>
				</template>
			</view>
			<view class="card count" v-if="timeType == 'date'">
				<u-grid :border="true">
					<u-grid-item v-for="(item, index) in weightInfo" :key="index">
						<view class="w-title grid-text">{{ item.text }}</view>
						<view class="w-num">{{ item.num }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<footbar deviceTypeCode="F2Pro"></footbar>
	</view>
</template>

<script>
import tabs from '@/components/tabs';
import timebar from '@/components/timebar';
import weightChart from './components/weightChart.vue';
import weightStep from '@/components/weightStep';
import footbar from './components/footbar.vue';
import { mapState } from 'vuex';
import { formatEveryDay } from '@/utils/index.js';
import { addZero } from '@/uni_modules/zxz-uni-datetime-picker/components/zxz-uni-datetime-picker/zxz-util.js';

export default {
	data() {
		return {
			timeType: 'date',
			tablist: ['体重', 'BMI', '体脂率'],
			curIndex: 0,
			weightData: [],
			weightInfo: [
				{
					value: '',
					num: '12',
					text: '身高年龄'
				},
				{
					value: 'standard_wt',
					num: '12',
					text: '骨骼肌量'
				},
				{
					value: '',
					num: '12',
					text: '基础代谢'
				},

				{
					value: '',
					num: '12',
					text: '水分率'
				},
				{
					value: '',
					num: '12',
					text: '蛋白质率'
				},
				{
					value: '',
					num: '12',
					text: '肌肉量'
				},
				{
					value: '',
					num: '12',
					text: '骨量'
				},
				{
					value: '',
					num: '12',
					text: '内脏脂肪'
				},
				{
					value: '',
					num: '12',
					text: '皮下脂肪'
				}
			]
		};
	},
	components: { tabs, timebar, weightChart, weightStep, footbar },
	computed: {
		...mapState(['curAccount'])
	},
	created() {},
	methods: {
		updateData(timeInfo) {
			this.getWeightCount({
				startTime: timeInfo.startDay + ' 00:00:00',
				endTime: timeInfo.endDay + ' 23:59:59',
				type: ['date', 'week', 'yearMonth', 'year'].findIndex(item => item == this.timeType)
			});
		},
		getWeightCount(param) {
			this.$postAction(this.$deviceapi.getWeightCount, {
				detailId: this.curAccount.detailId,
				...param
			}).then(da => {
				this.weightData = da || [];
				this.updateChart();
			});
		},
		updateChart() {
			let categories = [],
				data = [];
			if (this.timeType == 'date') {
				for (var i = 0; i < 24; i++) {
					categories.push(addZero(i) + ':00');
				}
			} else if (this.timeType == 'year') {
				for (var i = 0; i < 12; i++) {
					categories.push(this.$refs.timebar.yearWeek + '-' + addZero(i + 1));
				}
			} else {
				let list = formatEveryDay(this.$refs.timebar.startDay, this.$refs.timebar.endDay);
				categories = [...list];
			}
			console.log('categories', categories);
			if (this.weightData && this.weightData.length > 0) {
				this.weightData.forEach(item => {
					// categories.push(item.opdate.slice(0, 11));
					if (this.curIndex == 0) {
						data.push(item.weightData || null);
					} else if (this.curIndex == 1) {
						data.push(item.bmi || null);
					} else if (this.curIndex == 2) {
						data.push(item.bfr || null);
					}
				});
			}
			this.$refs.weightChart.getServerData(
				categories,
				[
					{
						name: this.curIndex == 0 ? '实时体重' : this.curIndex == 1 ? 'BMI' : '体脂率',
						connectNulls: true,
						data: data
					}
				],
				this.timeType == 'date' ? '' : this.timeType == 'year' ? 'xAxissemester' : 'xAxisDay',
				this.timeType == 'date' ? 5 : this.timeType == 'year' ? 6 : 8
			);
		},
		changeWeightTab(index) {
			if (this.curIndex != index) {
				this.curIndex = index;
				this.updateChart();
			}
		},
		changeTab(info) {
			this.timeType = info.value;
		}
	}
};
</script>
<style lang="scss" scoped>
@import 'pro.scss';
.weightCount {
	.weightbar {
		padding: 60upx 0 0;
		.weight {
			margin-right: 30upx;
			.num {
				font-size: 50upx;
				font-weight: 600;
				color: #333;
			}
		}
	}
	.grid {
		margin: 0 -30upx;
		text-align: center;
		.w-title {
			padding: 25upx 0 20upx;
		}
	}
}
</style>
